/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 微信管理，群发推送
 */
import React, { useState, useCallback } from "react";
import { connect } from "dva";
import PageHeaderLayout from "@/layouts/PageHeaderLayout";
import { Row, Col } from "antd";
import StandardTab from "@/components/StandardTab";
import HelpAndService from "@/components/HelpAndService";
import ChangeTemplateLink from "./ChangeTemplateLink";
import MessagePush from "./MessagePush";
import KeywordReply from "./KeywordReply";
import SubscribeReply from "./SubscribeReply";
import QrCodeScanPage from "../components/QrCodeScanPage";
import styles from "../style.less";

const MassPush = props => {
  const { platformList, hasBind } = props;
  const [activeKey, setActiveKey] = useState("operator");

  const handleTabChange = useCallback(_activeKey => {
    setActiveKey(_activeKey);
  }, []);

  return (
    <PageHeaderLayout
      content={
        hasBind ? (
          <div>
            <Row type="flex" justify="space-between" align="middle">
              <Col className={styles.overview}>
                <Row gutter={[10, 10]}>
                  <Col>
                    <span>
                      仅支持定制公众号：
                      <span className="title">
                        {(platformList.weixin && platformList.weixin.platformName) || "-"}
                      </span>
                      使用此功能
                    </span>
                  </Col>
                </Row>
              </Col>
            </Row>
          </div>
        ) : (
          <h3>定制公众号/小程序的客户请使用微信扫码后使用</h3>
        )
      }
    >
      <QrCodeScanPage>
        <div className={styles.main}>
          <div>
            <StandardTab
              name="MassPush"
              activeKey={activeKey}
              onChange={handleTabChange}
              tabBarExtraContent={<HelpAndService />}
              panes={[
                {
                  tab: "被关注回复",
                  key: "SubscribeReply",
                  component: <SubscribeReply />,
                },
                {
                  tab: "关键词回复",
                  key: "keywordReply",
                  component: <KeywordReply />,
                },
                {
                  tab: "文本消息推送",
                  key: "messagePush",
                  component: <MessagePush />,
                },
                {
                  tab: "模板链接替换",
                  key: "changeTemplateLink",
                  component: <ChangeTemplateLink />,
                },
              ]}
            />
          </div>
        </div>
      </QrCodeScanPage>
    </PageHeaderLayout>
  );
};

export default connect(({ platform }) => ({
  platformList: platform.platformList,
  hasBind: platform.hasBind,
}))(MassPush);
